<template>
	<statusBarVue title="工作台" :isShowBar="true" />
	<view class="workbenches-page" :style="pageHaveBarStyle">
		<view class="tab-btns">
			<view :class="current === index ? 'tab-btn active' : 'tab-btn'" @click="onClickItem(item, index)"
				v-for="(item, index) in items" :key="'tab-btn-'+index">{{item}}
			</view>
		</view>
		<view class="tab-content" :style="{ height: 'calc('+ pageHeight + 'px - 44px - 15px - 26px - 18px)'}">
			<view v-if="current === 0">
				<thingsWebVue :userInfo="userInfo" ref="thingsWebVue"/>
			</view>
			<view v-if="current === 1">
				<sendOutVue />
			</view>
			<view v-if="current === 2">
				<receiveVue />
			</view>
		</view>
	</view>
</template>

<script>
	import receiveVue from './module/receive.vue';
	import sendOutVue from './module/sendout.vue';
	import thingsWebVue from './module/thingsweb.vue';

	import statusBarVue from '@/components/statusBar.vue'

	import {
		publics
	} from '@/mixins/publics.js';

	export default {
		mixins: [publics],
		components: {
			receiveVue,
			sendOutVue,
			thingsWebVue,
			statusBarVue
		},
		data() {
			return {
				items: ['物联网', '发单工作台', '接单工作台'],
				current: 0
			};
		},
		onShow() {
			this.$refs.thingsWebVue.getInspectionMarkListApi()
		},
		onShareAppMessage() {
			// 监听用户右上角的转发
		},
		onShareTimeline() {
			// 监听用户右上角的分享到朋友圈
		},
		methods: {
			onClickItem(val, index) {
				this.current = index;
			}
		}
	};
</script>

<style lang="less">
	.workbenches-page {
		position: fixed;
		// top: 74px;
		left: 0;
		right: 0;
		z-index: 99;

		.tab-btns {
			width: 72%;
			height: 26px;
			border-radius: 26px;
			background-color: #F5F6FA;
			margin: 15px auto 18px;
			display: flex;
			justify-content: space-around;
			align-items: center;
			color: #000;
			font-size: 12px;

			&>.tab-btn {
				width: 33.3%;
				height: 26px;
				line-height: 26px;
				text-align: center;
				border-radius: 26px;

				&.active {
					background-color: #22A366;
					color: #fff;
				}
			}
		}

		.tab-content {
			&>view {
				height: 100%;
			}
		}
	}
</style>